<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>http工具</title>

  <script type="text/javascript" src="lib/jquery.js" defer></script>
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="lib/nav.css">
  <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js" defer></script>
  <link rel="stylesheet" href="lib/toastr/toastr.min.css">
  <script type="text/javascript" src="lib/toastr/toastr.min.js" defer></script>

  <script type="text/javascript" src="js/http_interface.js" defer></script>
</head>
<body>
  <!-- 导航栏 -->
  <div class="tool_nav">
    <ul>
        <li><a href="./index.html" class="tool_nav-a tool_active">HTTP接口</a></li>
        <li><a href="./ws.html" class="tool_nav-a">WEBSOCKET</a></li>
        <li><a href="./socketio.html" class="tool_nav-a">SOCKET.IO</a></li>
        <li><a href="./time.html" class="tool_nav-a">时间戳转换</a></li>
    </ul>
</div>
 

  <div class="container">
    <div class="row">
      <div class="panel panel-default">
        <div class="panel panel-heading">
          HTTP接口测试工具
        </div>
        <div class="panel panel-body">
          <div style="margin-bottom: 50px;" class="form-group">
            <div style="padding-left: 0px; padding-right: 0px;" class="col-sm-1">
              <select id="type" name="type" class="form-control">
              <option value="POST">POST</option>
              <option value="GET">GET</option>
              <!-- <option value="Delete">Delete</option>
              <option value="Put">Put</option>
              <option value="Trace">Trace</option>
              <option value="Head">Head</option>
              <option value="Options">Options</option> -->
              </select>
            </div>
            <!-- <div style="padding-left: 0px; padding-right: 0px;" class="col-sm-1">
              <select id="charset" name="charset" class="form-control">
              <option value="UTF-8">UTF-8</option>
              <option value="GBK">GBK</option>
              <option value="GB2312">GB2312</option>
              <option value="GB18030">GB18030</option>
              </select>
            </div> -->
            <div class="col-sm-7">
              <input type="text" autocomplete="off" placeholder="请求地址，以   http://  开头" value="" id="url" name="url" class="showBox form-control">
            </div>
            <div style="padding-left: 0px; padding-right: 0px;" class="col-sm-4">
              <input type="button" id="submit" value="发送请求" class="btn btn-success">
              <!-- <input type="button" value="结果复制" id="copyCode" class="btn btn-info copyCode" data-clipboard-target="json_input"> -->
              <input type="checkbox" id="openParameter" checked="checked">
              <label for="openParameter">请求参数</label>
              <input type="checkbox" id="crossOrigin" checked="checked">
              <label for="crossOrigin">跨域请求</label>
              <input type="checkbox" id="jsonStatus">
              <label for="jsonStatus">json格式</label>
              <!-- <input type="checkbox" id="openHeader" checked="checked" onclick="openInput('.header',this);">
              <label for="openHeader">请求Header</label> -->
            </div>
          </div>
          <!-- headers头输入框 -->
          <hr/>
          <h4>HTTP Headers 头参数</h4>
          <div style="margin-bottom: 20px;" id="single_parameter" class="form-group params">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                <th style="width: 30%;">参数名称</th>
                <th style="width: 70%;">参数值</th>
                </tr>
              </thead>
              <tbody>
                
                <tr>
                  <td colspan="2">
                  <button type="button" k="keys" v="values" onclick="addHeadersParameter(this,'key');" class="btn btn-default addParamenter">添加参数</button>
                  <button type="button" class="btn btn-default btn-sm pull-right" data-toggle="tooltip" data-placement="top" title="HTTP headers头参数">提示</button>
                  <!-- <button type="button" k="keys" v="values" onclick="parameter_exc('#single_parameter','#butch_parameter',1)" class="btn btn-info">批量添加（JSON参数）</button> -->
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 请求参数输入框 -->
          <hr/>
          <h4>Body 参数</h4>
          <div style="margin-bottom: 20px;" id="single_parameter" class="form-group params">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                <th style="width: 30%;">参数名称</th>
                <th style="width: 70%;">参数值</th>
                </tr>
              </thead>
              <tbody>
                <tr class="key">
                  <td><input k="" value="" name="keys" class="form-control" type="text" maxlength="100" placeholder="参数名称"></td>
                  <td>
                    <input value="" v="" name="values" class="form-control" type="text" maxlength="5000" style="width: 60%;float: left;" placeholder="参数数值">
                    <button type="button" onclick="del(this);" class="btn btn-primary btn-sm del_btn">删除参数</button>
                    <input type="radio" name="paramsType0" checked="checked" value="string">字符串
                    <input type="radio" name="paramsType0" value="array">数组
                    <input type="radio" name="paramsType0" value="object">对象
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                  <button type="button" k="keys" v="values" onclick="add_url_parameter(this,'key');" class="btn btn-success addParamenter">添加参数</button>
                  <button type="button" class="btn btn-default btn-sm pull-right" data-toggle="tooltip" data-placement="top" title="数组类型以逗号分隔参数如：1,2,3 。对象类型以JSON字符串形式">提示</button>
                  <!-- <button type="button" k="keys" v="values" onclick="parameter_exc('#single_parameter','#butch_parameter',1)" class="btn btn-info">批量添加（JSON参数）</button> -->
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="form-group">
            <!-- <div style="padding-left: 0px; padding-right: 0px;" class="col-sm-4">
              <label for="description">Header</label>
              <textarea placeholder="请求返回的Header信息。" id="head_info" calss="form-control" style="width: 100%;height: 305px;border: 1px solid #ccc;border-radius: 4px;" wrap="off"></textarea>
              <p class="help-block"><a href="#1">HTTP状态查询</a></p>
            </div> -->
            <div class="col-sm-12">
              <label for="description">Response Body （建议打开控制台查看返回的数据，会自动格式化）</label>
              <div class="linedwrap"><div class="lines" style="width: 100%; height: 349px;">
                <textarea placeholder="Response Body info" id="json_input" style="resize: both; min-width: 500px; width: 100%; height: 305px;" spellcheck="false" class="json_input"></textarea>
              </div>
            </div>
          </div>

          <div style="" id="moretext"><h2>HTTP状态码说明</h2><p>1xx（临时响应）</p><p>表示临时响应并需要请求者继续执行操作的状态代码。</p><p>代码 说明 </p><p>100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 </p><p>101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。 </p><p>2xx （成功）</p><p>表示成功处理了请求的状态代码。</p><p>代码 说明 </p><p>200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 </p><p>201 （已创建） 请求成功并且服务器创建了新的资源。 </p><p>202 （已接受） 服务器已接受请求，但尚未处理。 </p><p>203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 </p><p>204 （无内容） 服务器成功处理了请求，但没有返回任何内容。 </p><p>205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。</p><p>206 （部分内容） 服务器成功处理了部分 GET 请求。 </p><p>3xx （重定向） </p><p>表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。</p><p>代码 说明 </p><p>300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 </p><p>301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。</p><p>302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</p><p>303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。</p><p>304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 </p><p>305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 </p><p>307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 </p><p>4xx（请求错误） </p><p>这些状态代码表示请求可能出错，妨碍了服务器的处理。</p><p>代码 说明 </p><p>400 （错误请求） 服务器不理解请求的语法。 </p><p>401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 </p><p>403 （禁止） 服务器拒绝请求。</p><p>404 （未找到） 服务器找不到请求的网页。</p><p>405 （方法禁用） 禁用请求中指定的方法。 </p><p>406 （不接受） 无法使用请求的内容特性响应请求的网页。 </p><p>407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。</p><p>408 （请求超时） 服务器等候请求时发生超时。 </p><p>409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 </p><p>410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。 </p><p>411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 </p><p>412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 </p><p>413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 </p><p>414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 </p><p>415 （不支持的媒体类型） 请求的格式不受请求页面的支持。 </p><p>416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 </p><p>417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。 </p><p>5xx（服务器错误）</p><p>这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。</p><p>代码 说明 </p><p>500 （服务器内部错误） 服务器遇到错误，无法完成请求。 </p><p>501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 </p><p>502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 </p><p>503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 </p><p>504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。 </p><p>505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。 </p></div>

        </div>
      </div>
    </div>
  </div>
  <footer>
      <h3 class="pull-right"><em></em></h3>
  </footer>
</body>
</html>